<!-- Dialog公共组件 -->
<template>
    <el-dialog
      class="lv-dialog"
      :model-value="show"
      :title="title"
      :width="width"
      :align-center="alignCenter"
      :destroy-on-close="destroyOnClose"
      :fullscreen="fullscreen"
      :close-on-click-modal="closeOnClickModal"
      :append-to-body="appendToBody"
      @close="handleClose"
      @open="handleOpen"
    >
      <slot></slot>
  
      <template #header>
        <!-- start-警告提示弹窗顶部样式 -->
        <div class="flex items-center" v-if="isWarning">
          <span class="text-lg font-semibold text-main-black">{{ title }}</span>
        </div>
        <!-- end-警告提示弹窗顶部样式 -->
        <slot name="header" v-else></slot>
      </template>
  
      <template #footer>
        <div class="dialog-footer" v-if="!hideFooter">
          <el-button @click="handleCancel" v-if="!hideCancelBtn">{{
            cancelText
          }}</el-button>
          <el-button
            type="primary"
            @click="handleConfirm"
            v-if="!hideConfirmBtn"
            :disabled="confirmDisabled"
            :loading="confirmLoading"
          >
            {{ confirmText }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  /**
   * @param title: 标题
   * @param width: 宽度
   * @param hideFooter: 隐藏底部按钮
   * @param confirmText: 确认按钮显示文字
   * @param cancelText: 取消按钮显示文字
   * @param fullscreen: 是否全屏
   * @param destroyOnClose: 关闭时销毁
   * @param alignCenter: 是否水平垂直对齐对话框
   * @param show: 显示隐藏
   * @param isWarning: 是否是提示弹窗
   * @param hideCancelBtn: 隐藏取消按钮
   * @param hideConfirmBtn: 隐藏确定按钮
   * @param confirmDisabled: 禁用确定按钮
   * @param confirmLoading: 确定按钮加载状态
   *
   * @event confirm: 点击确认事件
   * @event cancel: 点击取消事件
   * @event close: 关闭弹窗事件
   * @event open: 开启弹窗事件
   */
  withDefaults(
    defineProps<{
      show: boolean
      title: string
      width?: string
      hideFooter?: boolean
      confirmText?: string
      cancelText?: string
      fullscreen?: boolean
      destroyOnClose?: boolean
      alignCenter?: boolean
      isWarning?: boolean
      hideCancelBtn?: boolean
      hideConfirmBtn?: boolean
      confirmDisabled?: boolean
      confirmLoading?: boolean
      closeOnClickModal?: boolean
      appendToBody?: boolean
    }>(),
    {
      title: '信息',
      width: '30%',
      fullscreen: false,
      confirmText: '确定',
      cancelText: '取消',
      destroyOnClose: false,
      alignCenter: false,
      isWarning: false,
      hideCancelBtn: false,
      hideConfirmBtn: false,
      confirmDisabled: false,
      confirmLoading: false,
      closeOnClickModal: false,
      appendToBody: true
    }
  )
  const showDialog = ref<boolean>(false)
  
  const emits = defineEmits(['update:show', 'confirm', 'cancel', 'close', 'open'])
  const handleConfirm = () => {
    emits('confirm')
  }
  const handleCancel = () => {
    showDialog.value = false
    emits('cancel')
  }
  const handleClose = () => {
    updateStatus(false)
    emits('close')
  }
  const handleOpen = () => {
    updateStatus(true)
    emits('open')
  }
  const updateStatus = (status: boolean) => {
    emits('update:show', status)
  }
  </script>
  
  <style lang="scss">
  .lv-dialog {
    padding: 26px !important;
    .el-dialog__header {
      padding: 14px;
    }
    .el-dialog__title {
      font-size: 18px;
      color: #333;
      font-weight: 600 !important;
    }
    .el-dialog__close {
      font-size: 20px !important;
      color: #333 !important;
    }
    .el-dialog__headerbtn {
      top: 28px;
      right: 28px;
    }
    .el-dialog__body {
      padding: 14px 14px;
      max-height: 60vh;
      overflow: auto;
    }
    .el-dialog__footer {
      padding: 14px;
    }
  }
  </style>
  